<template>
  <div>
    <div class="box">
      <div class="message leading-[40px]">功能说明</div>
      <div class="message leading-[40px]">操作</div>
    </div>
    <div class="box mt-[-1px]">
      <div class="message leading-[50px]">
        <span class="text-[red]">*</span> 是否开启接收告警信息提示
      </div>
      <div class="message leading-[50px]">
        <el-radio-group v-model="configData.open_alarm_prompt" class="ml-4">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div style="display: flex; margin-top: -1px; border: 1px solid #e4e7ed">
      <div class="message leading-[50px]">
        <span class="text-[red]">*</span> 是否开启系统告警弹窗
      </div>
      <div class="message leading-[50px]">
        <el-radio-group v-model="configData.open_alarm_popup" class="ml-4">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="box mt-[-1px]">
      <div class="message leading-[50px]">
        <span class="text-[red]">*</span> 是否开启系统告警提示音
      </div>
      <div class="message leading-[50px]">
        <el-radio-group v-model="configData.open_alarm_voice" class="ml-4">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </div>

    <el-button type="primary" class="mt-[15px]" @click="saveSettings"
      >保存设置</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { storageLocal } from "@pureadmin/utils";

const configData = ref<any>({
  open_alarm_popup: true,
  open_alarm_prompt: true,
  open_alarm_voice: true
});

const saveSettings = () => {
  storageLocal().setItem("configData", configData.value);
  ElMessage({
    message: "保存成功",
    type: "success"
  });
};

onMounted(() => {
  if (storageLocal().getItem<StorageConfigs>("configData")) {
    configData.value = storageLocal().getItem<StorageConfigs>("configData");
  }
});
</script>
<style scoped lang="scss">
.message {
  width: 200px;
  padding: 0 10px;
  font-size: 14px;
  border-right: 1px solid #e4e7ed;
}

.box {
  display: flex;
  border: 1px solid #e4e7ed;
}
</style>
